<template>
  <div class="workorder">
    <top/>
      <el-row :span="24" class="title" style="padding-left:4vw;">
      <el-col :span="4">
        <p></p>
      </el-col>
      <el-col :span="4">
        <el-input ></el-input>
      </el-col>
      <el-col :span="4">
        <el-button>查询</el-button>
      </el-col>
      <el-col :span="8">
        <p></p>
      </el-col>
      <el-col :span="4">
        <el-button @click="showAddWork()">新增工单</el-button>
      </el-col>
    </el-row>

    <!-- 新增工单的弹出框 -->
    <el-dialog title="" :visible.sync="addworkDialog">
      <el-form :model="workAddForm" label-width="80px">
        <el-form-item label="计划编号">
          <!-- select綁定變量 -->
          <el-select v-model="workAddForm.planId" placeholder="请选择">
            <el-option v-for="item in workPlan" :key="item.planId" :label="item.planName" :value="item.planId" :disabled="item.disabled">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="工单状态">
          <el-input  v-model="workAddForm.state" :disabled='true'  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="产品名称">
          <el-input  v-model="workAddForm.productName"  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="设备型号">
          <el-input v-model="workAddForm.mechineId" style="width: 220px"/>
        </el-form-item>
        <el-button type="primary" @click="addwork()">立即创建</el-button>
        <el-button @click="addworkDialog = false">取消</el-button>
      </el-form>
    </el-dialog>

    <!-- 修改工单的弹出框 -->
    <el-dialog title="" :visible.sync="updateworkDialog">
      <el-form :model="workupdateForm" label-width="80px">
        <el-form-item label="计划编号">
          <el-input  v-model="workupdateForm.planId"  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="工单状态">
          <el-input  v-model="workupdateForm.state"  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="产品名称">
          <el-input  v-model="workupdateForm.productName"  style="width: 220px"></el-input>
        </el-form-item>

        <el-form-item label="设备型号">
          <el-input v-model="workupdateForm.mechineId" style="width: 220px"/>
        </el-form-item>
        <el-button type="primary" @click="updatework()">立即创建</el-button>
        <el-button @click="updateworkDialog = false">取消</el-button>
      </el-form>
    </el-dialog>

    <!-- 显示所有工单信息 -->
    <el-table :data="workList" style="width: 100%;padding-left:4vw;">
      <el-table-column prop="workOrderId" label="工单编号" width="130">
      </el-table-column>

      <el-table-column prop="planId" label="计划编号" width="130">
      </el-table-column>

      <el-table-column prop="state" label="工单状态" width="130">
      </el-table-column>

      <el-table-column prop="productName" label="产品名称" width="130">
      </el-table-column>


      <el-table-column prop="mechineId" label="设备型号" width="130">
      </el-table-column>

      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="showUpdate(scope.$index, scope.row)">编辑</el-button >
          <el-button size="mini" type="danger"
            @click="handleDelete(scope.$index, scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
// @ is an alias to /src
import Top from '@/components/Top.vue'

export default {
  name: 'workorder',
  data(){
      return{
          factoryId:this.$route.query.factoryId,
          workAddForm:{
              planId:'',
              state:'未启动',
              productName:'',
              mechineId:''
          },
          workupdateForm:'',
          addworkDialog:false,
          updateworkDialog:false,
          workList:[],
          workPlan:[],
      }
  },//data
  mounted:function(){
      this.getAllwork();
  },
  methods:{
    getAllwork(){
      this.$axios.post(
        'WorkOrderController/selectAllWork',
        this.$qs.stringify({factoryId:this.factoryId})
      ).then((value) => { // eslint-disable-line no-unused-vars
        this.workList = value.data;
        console.log(value.data);
      }).catch((value) => {
        console.error(value);
      })
    },
    //获取已启动的计划
    getWorkPlan(){
        this.$axios.post(
            'PlanController/listPlanByState',
            this.$qs.stringify({planState:'运行中'})
        ).then((value) => {
            this.workPlan = value.data;
        }).catch((value) => {
            console.error(value);
        })
    },
      //显示新增页面
      showAddWork(){
          this.addworkDialog=true;
          this.getWorkPlan();
      },
      //显示修改页面
      showUpdate(){
          this.updateworkDialog=true;
      },
      //增加工单
      addwork(){
          this.$axios.post(
              'WorkOrderController/saveWorkOrder',
              this.$qs.stringify(this.workAddForm)
          ).then((value) => {
            // eslint-disable-next-line no-unused-vars
            let num = value.data;
            this.$confirm("创建成功").then(() => {
            this.addworkDialog = false;
            this.getAllwork();
        })
          }).catch((value) => {
              console.error(value);
          })
      },//
      //删除工单
      handleDelete(index,row){  
        if(row.state == "生产中"){
          this.$confirm("工单已启动不能删除！")
        }else{
        this.$confirm("确认删除？").then(() => {
         this.$message("删除成功");
            this.$axios.post(
            'WorkOrderController/deleteWorkOrder',
            this.$qs.stringify({workOrderId:row.workOrderId})
            ).then((res) => {
            // eslint-disable-next-line no-unused-vars
            let num = res.data;
            this.getAllwork();
            }).catch((value) => {
            console.error(value);
            })
        })
        }    

      }
  },
  components: {
    Top
  }
}
</script>